import * as UI from './ui';
import styles from './index.module.less';
import Flex from '@/components/flex';
import { DotLoading } from '@/components/base';
import { PageController } from './page-controller';
import React from 'react';
import { useObserver } from 'mobx-react-lite';

export default function ServicesManagement() {
    return (
        <Body />
    );
}

function Body() {
    const pageController = React.useMemo(() => new PageController(), []);
    const loading = useObserver(() => pageController.loading);

    React.useEffect(() => {
        pageController.page = 1;
        pageController.data = [];
        pageController.query();
    }, [pageController]);

    return (
        <PageController.Context.Provider value={pageController}>
            <Flex vertical className={styles['services-management']}>
                <UI.Header />
                <div className={styles['body']} >
                    <UI.Statistics />
                    <UI.ServiceList />
                    {loading > 0 && <Flex justify='center' align='center'><DotLoading /></Flex>}
                </div>
            </Flex>
        </PageController.Context.Provider>
    );
} 